<template>
  <div class="box">
    <div class="head">
      <van-nav-bar title="我的京东">
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-icon name="ellipsis" size="25" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="center">
      <div class="timg">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202012%2F26%2F20201226223704_3f25a.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672456479&t=6b21bd3476dae077628ba951f0c51dfc"
          alt=""
        />
      </div>
      <div class="aboutmy">
        <p>昵称</p>
        <span>{{ myname }}</span>
      </div>
    </div>
    <van-cell is-link title="我的订单" />
    <van-cell
      is-link
      title="修改密码"
      @click="$router.push('/changepassword')"
    />
    <van-cell
      is-link
      title="修改订单地址"
      @click="$router.push('/address')"
    ></van-cell>
  </div>
</template>

<script>
import Vue from "vue";
import { Skeleton, ActionSheet, Toast, Cell, Dialog, Area } from "vant";
import { getMeMsg, CxAddress } from "../api/me";
Vue.use(Skeleton);
Vue.use(ActionSheet);
Vue.use(Cell);
Vue.use(Toast);
Vue.use(Dialog);
Vue.use(Area);
export default {
  name: "Me",
  components: {},
  data() {
    return {
      mymsg: [],
      myname: "",
    };
  },
  created() {
    getMeMsg({ userid: localStorage.getItem("id") }).then((res) => {
      // console.log(res.data.data)
      this.mymsg = res.data.data;
      this.myname = this.mymsg[0].userid;
    });
    CxAddress({ userid: localStorage.getItem("id") }).then((res) => {
      console.log(res.data.data);
      if (res.data.data.length!=0) {
        localStorage.setItem("address", JSON.stringify(res.data.data));
      }
    });
  },
  methods: {},
};
</script>

<style scoped>
.timg {
  margin: 0.1rem 0.3rem;
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.timg img {
  width: 100%;
}
.center {
  display: flex;
  background-color: rgb(247, 16, 16);
}
.aboutmy {
  padding: 0.2rem 0;
}
.address {
  padding: 0.1rem;
}
.address input {
  width: 3rem;
  height: 0.4rem;
}
</style>